{% extends "layout.html" %}


{% block content %}
<h2><i class=" fab fa-github fa-sm">
  | GitHub API
</i></h2>

<div class="btn-group d-flex" role='group'>
  <a class="btn btn-primary w-100" href='http://developer.github.com/guides/getting-started/' target='_blank'>
    <i class="far fa-check-square fa-sm"></i>
    Getting Started
  </a>
  <a class="btn btn-primary w-100" href='https://apigee.com/console/github' target='_blank'>
    <i class="fas fa-laptop fa-sm"></i>| API Console
  </a>
  <a class="btn btn-primary w-100" href='http://developer.github.com/v3/' target='_blank'>
    <i class="fas fa-file-alt fa-sm"></i>| Documentation
  </a>
</div>

<div class=" card text-white bg-primary">
  <div class="card-header">
    <h6 class="panel-title mb-0">Repository Information</h6>
  </div>
  <div class="card-body text-dark bg-white">
    <div class="row">
      <div class="col-4">
        <img class="rounded img-fluid" src='https://github.githubassets.com/images/modules/logos_page/Octocat.png'/>
      </div>
      <div class="col-8">
        <h4><a href={{repo.html_url}}></a>{{repo.name}}</h4>
        <ul class="list-inline">
          <li class="list-inline-item"><i class="far fa-eye-slash fa-sm"></i> | Subscribers: {{repo.subscribers_count}}</li>
          <li class="list-inline-item"><i class="far fa-star fa-sm"></i> | Subscribers: {{repo.stargazers_count}}</li>
          <li class="list-inline-item"><i class="far fa-code-branch fa-sm"></i> | Subscribers: {{repo.forks_count}}</li>
          <li class="list-inline-item"><i class="far fa-code fa-sm"></i> | Subscribers: {{repo.language}}</li>


        </ul>
        <strong>strong DESCRIPTION</strong>
        <p>{{repo.description}}</p>
      </div>
    </div>
  </div>

</div>
{% endblock %}
